<template>
  <div>
    <!-- router中的函数需要执行 -->
    <button @click="$router.forward()">前进</button>
    <button @click="$router.back()">后退</button>
    <button @click="$router.go(-2)">后退2</button>
    <h1>home</h1>
    <!-- 声明式路由加载 -->
    <!-- to中添加的参数和push中location中的值一致,可以为路径字符串或者是location对象 -->
    <!-- tag为其展示的标签类型 -->
    <router-link to="/home/music" active-class="active" tag="button"
      >Music</router-link
    >
    <router-link
      :to="{
        path: '/home/play',
      }"
      tag="button"
      active-class="active"
      >Play</router-link
    >
    <!-- replace配置项,当使用replace配置项后,就不会使用$router.push跳转而是转换成$router.replace跳转 -->
    <!-- <router-link to="/home/work" replace tag="button">Work</router-link> -->
    <!-- active-class 当当前路由激活时配置的点击类名 -->
    <router-link to="/home/work" active-class="active" tag="button"
      >Work</router-link
    >
    <!-- 路由也可以添加动态组件的keep-alive配置以及 actiated生命周期 -->
    注意: 如果在路由中使用include
    :其中的值不是注册组件名的字符串,而是组件的name值,是组件自己页面中配置的name值而不是路由配置中的name
    <keep-alive :include="['Music']">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import Music from './Music'
export default {
  mounted() {
    let re = import('./Music')
    console.log(re)
    console.dir(Music)
  },
  methods: {
    goMusic() {
      // 编程式路由跳转,在vue中使用注入到实例中的$router实例原型上的方法实现跳转
      // 控制路由间的跳转,也就是控制多个路由,所以需要使用router路由器管理
      this.$router.push('/home/music')
    },
    goPlay() {
      this.$router.push({
        // 传入值可以是字符串或者配置对象
        // path: '/home/play',

        name: 'play', // 如果路由含有name.可以使用name替代path
      })
    },
    goWork() {
      // replace 替换跳转,直接在历史记录中将当前记录替换为新跳转的路径,不能通过返回,返回到刚才的页面
      // this.$router.replace({
      this.$router.push({
        path: '/home/work',
      })
    },
  },
}
</script>

<style>
.active {
  background-color: orange;
  color: #fff;
}
</style>
